<script setup>
/**
 * BaseNavBar 组件
 * 统一全局导航栏，基于 Vant4 van-nav-bar 封装，支持自定义标题、返回按钮、背景色、标题色、返回按钮色、边框等。
 *
 * @props {string} title 标题文本
 * @props {boolean} showBack 是否显示返回按钮，默认 true
 * @props {string} background 导航栏背景色，默认 #fff
 * @props {string} color 标题文字颜色，默认 #333
 * @props {string} backColor 返回按钮颜色，默认 #333
 * @props {boolean} border 是否显示底部边框，默认 true
 * @props {boolean} fixed 是否固定在顶部，默认 true
 *
 * @example
 * <BaseNavBar title="页面标题" :showBack="true" background="#f8f8f8" color="#333" backColor="#ff4d4f" />
 */
import { useRouter } from 'vue-router'
const props = defineProps({
  title: String,
  showBack: { type: Boolean, default: true },
  background: { type: String, default: '#fff' },
  color: { type: String, default: '#333' },
  backColor: { type: String, default: '#333' },
  border: { type: Boolean, default: true },
  fixed: { type: Boolean, default: true }
})
const router = useRouter()
const onBack = () => router.back()
</script>

<template>
  <van-nav-bar
    :title="title"
    :left-arrow="showBack"
    :fixed="fixed"
    :border="border"
    @click-left="onBack"
    :style="{
      background: background,
      color: color,
      '--van-nav-bar-icon-color': backColor,
      '--van-nav-bar-arrow-color': backColor,
      '--van-nav-bar-title-text-color': color
    }"
  >
    <template #left>
      <slot name="left">
        <van-icon v-if="showBack" name="arrow-left" :color="backColor" size="22" />
      </slot>
    </template>
    <template #right>
      <slot name="right"></slot>
    </template>
  </van-nav-bar>
</template>
